<template>
  <el-input
    placeholder="菜单名"
    class="search"
    suffix-icon="el-icon-search"
    v-model="menu_name"
  ></el-input>
  <el-select class="search" v-model="parent_id" placeholder="请选择父菜单">
    <el-option
      v-for="(item, index) in menu2"
      :key="index"
      :label="item.menuName"
      :value="item.menuId"
    ></el-option>
  </el-select>
  <el-button type="primary" icon="el-icon-search" @click="searchMenu">
    查询
  </el-button>
  <el-button icon="el-icon-refresh" @click="reset">重置</el-button>
  <br />
  <el-button type="success" icon="el-icon-plus" @click="addMenuBtn">
    新增
  </el-button>
  <el-button type="danger" icon="el-icon-delete" @click="deleterows">
    批量删除
  </el-button>
  <br />
  <br />
  <el-table
    ref="menuList"
    @selection-change="handleSelectionChange"
    :data="menu.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
    height="530"
    style="width: 100%"
  >
    <el-table-column type="selection"></el-table-column>
    <el-table-column prop="menuId" label="菜单id"></el-table-column>
    <el-table-column prop="parentId" label="父菜单"></el-table-column>
    <el-table-column prop="menuName" label="菜单名称"></el-table-column>
    <el-table-column prop="path" label="路径"></el-table-column>
    <el-table-column prop="component" label="权限"></el-table-column>
    <el-table-column prop="icon" label="图标"></el-table-column>
    <el-table-column prop="createDate" label="创建时间"></el-table-column>
    <el-table-column prop="isDelete" label="状态">
      <template #default="scope">
        <el-button v-if="scope.row.isDelete == 0" type="success" size="small">
          已启用
        </el-button>
        <el-button v-else type="danger" size="small">已禁用</el-button>
      </template>
    </el-table-column>
    <el-table-column fixed="right" align="center" label="操作" min-width="150">
      <template #default="scope">
        <el-popconfirm hide-icon="true" :title="checkData">
          <template #reference>
            <el-button
              icon="el-icon-view"
              size="small"
              type="info"
              @click="check(scope.row)"
            ></el-button>
          </template>
        </el-popconfirm>
        <el-button
          icon="el-icon-edit"
          size="small"
          type="warning"
          @click="editrow(scope.row)"
        ></el-button>
        <el-button
          size="small"
          v-if="scope.row.isDelete == 0"
          icon="el-icon-delete"
          type="danger"
          @click="deleterow(scope.row)"
        ></el-button>
        <el-button
          size="small"
          v-else
          icon="el-icon-delete"
          type="danger"
          disabled
          @click="deleterow(scope.row)"
        ></el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    v-model:current-page="currentPage"
    v-model:page-size="pageSize"
    :page-sizes="[5, 10, 15, 20, 30]"
    :size="default"
    :disabled="disabled"
    :background="background"
    layout="total, prev, pager, next,sizes"
    :total="menu.length"
  />
  <el-dialog v-model="dialogFormVisible" title="菜单管理" :width="450">
    <el-form style="padding: 20px" v-model="rowdata">
      <el-form-item label="菜单id" label-width="formLabelWidth">
        <el-input autocomplete="off" v-model="rowdata.menuId" disabled />
      </el-form-item>
      <el-form-item label="父菜单" :label-width="formLabelWidth">
        <el-select v-model="rowdata.parentId" placeholder="请选择角色">
          <el-option
            v-for="(item, index) in menu2"
            :key="index"
            :label="item.menuName"
            :value="item.menuId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="菜单名" :label-width="formLabelWidth">
        <el-input autocomplete="off" v-model="rowdata.menuName" />
      </el-form-item>
      <el-form-item label="路&emsp;径" :label-width="formLabelWidth">
        <el-input autocomplete="off" v-model="rowdata.path" />
      </el-form-item>
      <el-form-item label="状&emsp;态" :label-width="formLabelWidth">
        <el-radio-group v-model="statu">
          <el-radio :label="0" size="large">启用</el-radio>
          <el-radio :label="1" size="large">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="saveMenu">保存</el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog v-model="addDialogVisible" title="添加菜单" :width="450">
    <el-form style="padding: 20px" ref="addForm" :model="newMenu">
      <!-- <el-form-item label="菜单id" label-width="formLabelWidth">
        <el-input autocomplete="off" v-model="rowdata.menu_id" />
      </el-form-item> -->
      <el-form-item label="菜单名" :label-width="formLabelWidth">
        <el-input autocomplete="off" v-model="newMenu.menuName" />
      </el-form-item>
      <el-form-item label="父菜单" :label-width="formLabelWidth">
        <el-select v-model="newMenu.menuId" placeholder="请选择父级菜单">
          <el-option
            v-for="(item, index) in menu2"
            :key="index"
            :label="item.menuName"
            :value="item.menuId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="路&emsp;径" :label-width="formLabelWidth">
        <el-input autocomplete="off" v-model="newMenu.path" />
      </el-form-item>
      <!-- <el-form-item label="组&emsp;件" :label-width="formLabelWidth">
        <el-input autocomplete="off" v-model="newMenu.component" />
      </el-form-item>
      <el-form-item label="权&emsp;限" :label-width="formLabelWidth">
        <el-input autocomplete="off" v-model="newMenu.perms" />
      </el-form-item> -->
      <el-form-item label="图&emsp;标" :label-width="formLabelWidth">
        <el-button
          style="width: 315px;"
          lable="选择图标"
          @click="iconsDialog = true"
        >
          {{ newMenu.icon }}
        </el-button>
        <el-input
          style="display: none;"
          autocomplete="off"
          v-model="newMenu.icon"
          disabled
        />
      </el-form-item>
      <el-form-item label="类&emsp;型" :label-width="formLabelWidth">
        <el-input autocomplete="off" v-model="newMenu.type" />
      </el-form-item>
      <el-form-item label="排序号" :label-width="formLabelWidth">
        <el-input autocomplete="off" v-model="newMenu.orderNum" />
      </el-form-item>
      <!-- <el-form-item label="创建日期" :label-width="formLabelWidth">
        <el-input autocomplete="off" v-model="rowdata.createDate"/>
      </el-form-item> -->
      <el-form-item :label-width="formLabelWidth" style="text-align: center">
        <el-button @click="addDialogVisible = false">取消</el-button>
        &emsp;&emsp;
        <el-button type="success" @click="SubmitMenu">提交</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
  <el-dialog v-model="iconsDialog" title="选择图标" :width="780">
    <ul style="line-height: 180%;">
      <li
        id="iconLi"
        style="margin-right: 20px;padding: 2px;list-style: none;display: inline-block;"
        v-for="iconName in iconFontList"
      >
        <i
          style="font-size: 30px;"
          :class="iconName"
          :value="iconName"
          @click="selectIcon(iconName)"
        ></i>
      </li>
    </ul>
  </el-dialog>
</template>
<script setup>
import { getMenu, deleteMenu, addMenu, editMenu } from '@/api/role'
import { onMounted, reactive, ref } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'
const iconFontList = [
  'el-icon-platform-eleme',
  'el-icon-eleme',
  'el-icon-delete-solid',
  'el-icon-delete',
  'el-icon-s-tools',
  'el-icon-setting',
  'el-icon-user-solid',
  'el-icon-user',
  'el-icon-phone',
  'el-icon-phone-outline',
  'el-icon-more',
  'el-icon-more-outline',
  'el-icon-star-on',
  'el-icon-star-off',
  'el-icon-s-goods',
  'el-icon-goods',
  'el-icon-warning',
  'el-icon-warning-outline',
  'el-icon-question',
  'el-icon-info',
  'el-icon-remove',
  'el-icon-circle-plus',
  'el-icon-success',
  'el-icon-error',
  'el-icon-zoom-in',
  'el-icon-zoom-out',
  'el-icon-remove-outline',
  'el-icon-circle-plus-outline',
  'el-icon-circle-check',
  'el-icon-circle-close',
  'el-icon-s-help',
  'el-icon-help',
  'el-icon-minus',
  'el-icon-plus',
  'el-icon-check',
  'el-icon-close',
  'el-icon-picture',
  'el-icon-picture-outline',
  'el-icon-picture-outline-round',
  'el-icon-upload',
  'el-icon-upload2',
  'el-icon-download',
  'el-icon-camera-solid',
  'el-icon-camera',
  'el-icon-video-camera-solid',
  'el-icon-video-camera',
  'el-icon-message-solid',
  'el-icon-bell',
  'el-icon-s-cooperation',
  'el-icon-s-order',
  'el-icon-s-platform',
  'el-icon-s-fold',
  'el-icon-s-unfold',
  'el-icon-s-operation',
  'el-icon-s-promotion',
  'el-icon-s-home',
  'el-icon-s-release',
  'el-icon-s-ticket',
  'el-icon-s-management',
  'el-icon-s-open',
  'el-icon-s-shop',
  'el-icon-s-marketing',
  'el-icon-s-flag',
  'el-icon-s-comment',
  'el-icon-s-finance',
  'el-icon-s-claim',
  'el-icon-s-custom',
  'el-icon-s-opportunity',
  'el-icon-s-data',
  'el-icon-s-check',
  'el-icon-s-grid',
  'el-icon-menu',
  'el-icon-share',
  'el-icon-d-caret',
  'el-icon-caret-left',
  'el-icon-caret-right',
  'el-icon-caret-bottom',
  'el-icon-caret-top',
  'el-icon-bottom-left',
  'el-icon-bottom-right',
  'el-icon-back',
  'el-icon-right',
  'el-icon-bottom',
  'el-icon-top',
  'el-icon-top-left',
  'el-icon-top-right',
  'el-icon-arrow-left',
  'el-icon-arrow-right',
  'el-icon-arrow-down',
  'el-icon-arrow-up',
  'el-icon-d-arrow-left',
  'el-icon-d-arrow-right',
  'el-icon-video-pause',
  'el-icon-video-play',
  'el-icon-refresh',
  'el-icon-refresh-right',
  'el-icon-refresh-left',
  'el-icon-finished',
  'el-icon-sort',
  'el-icon-sort-up',
  'el-icon-sort-down',
  'el-icon-rank',
  'el-icon-loading',
  'el-icon-view',
  'el-icon-c-scale-to-original',
  'el-icon-date',
  'el-icon-edit',
  'el-icon-edit-outline',
  'el-icon-folder',
  'el-icon-folder-opened',
  'el-icon-folder-add',
  'el-icon-folder-remove',
  'el-icon-folder-delete',
  'el-icon-folder-checked',
  'el-icon-tickets',
  'el-icon-document-remove',
  'el-icon-document-delete',
  'el-icon-document-copy',
  'el-icon-document-checked',
  'el-icon-document',
  'el-icon-document-add',
  'el-icon-printer',
  'el-icon-paperclip',
  'el-icon-takeaway-box',
  'el-icon-search',
  'el-icon-monitor',
  'el-icon-attract',
  'el-icon-mobile',
  'el-icon-scissors',
  'el-icon-umbrella',
  'el-icon-headset',
  'el-icon-brush',
  'el-icon-mouse',
  'el-icon-coordinate',
  'el-icon-magic-stick',
  'el-icon-reading',
  'el-icon-data-line',
  'el-icon-data-board',
  'el-icon-pie-chart',
  'el-icon-data-analysis',
  'el-icon-collection-tag',
  'el-icon-film',
  'el-icon-suitcase',
  'el-icon-suitcase-1',
  'el-icon-receiving',
  'el-icon-collection',
  'el-icon-files',
  'el-icon-notebook-1',
  'el-icon-notebook-2',
  'el-icon-toilet-paper',
  'el-icon-office-building',
  'el-icon-school',
  'el-icon-table-lamp',
  'el-icon-house',
  'el-icon-no-smoking',
  'el-icon-smoking',
  'el-icon-shopping-cart-full',
  'el-icon-shopping-cart-1',
  'el-icon-shopping-cart-2',
  'el-icon-shopping-bag-1',
  'el-icon-shopping-bag-2',
  'el-icon-sold-out',
  'el-icon-sell',
  'el-icon-present',
  'el-icon-box',
  'el-icon-bank-card',
  'el-icon-money',
  'el-icon-coin',
  'el-icon-wallet',
  'el-icon-discount',
  'el-icon-price-tag',
  'el-icon-news',
  'el-icon-guide',
  'el-icon-male',
  'el-icon-female',
  'el-icon-thumb',
  'el-icon-cpu',
  'el-icon-link',
  'el-icon-connection',
  'el-icon-open',
  'el-icon-turn-off',
  'el-icon-set-up',
  'el-icon-chat-round',
  'el-icon-chat-line-round',
  'el-icon-chat-square',
  'el-icon-chat-dot-round',
  'el-icon-chat-dot-square',
  'el-icon-chat-line-square',
  'el-icon-message',
  'el-icon-postcard',
  'el-icon-position',
  'el-icon-turn-off-microphone',
  'el-icon-microphone',
  'el-icon-close-notification',
  'el-icon-bangzhu',
  'el-icon-time',
  'el-icon-odometer',
  'el-icon-crop',
  'el-icon-aim',
  'el-icon-switch-button',
  'el-icon-full-screen',
  'el-icon-copy-document',
  'el-icon-mic',
  'el-icon-stopwatch',
  'el-icon-medal-1',
  'el-icon-medal',
  'el-icon-trophy',
  'el-icon-trophy-1',
  'el-icon-first-aid-kit',
  'el-icon-discover',
  'el-icon-place',
  'el-icon-location',
  'el-icon-location-outline',
  'el-icon-location-information',
  'el-icon-add-location',
  'el-icon-delete-location',
  'el-icon-map-location',
  'el-icon-alarm-clock',
  'el-icon-timer',
  'el-icon-watch-1',
  'el-icon-watch',
  'el-icon-lock',
  'el-icon-unlock',
  'el-icon-key',
  'el-icon-service',
  'el-icon-mobile-phone',
  'el-icon-bicycle',
  'el-icon-truck',
  'el-icon-ship',
  'el-icon-basketball',
  'el-icon-football',
  'el-icon-soccer',
  'el-icon-baseball',
  'el-icon-wind-power',
  'el-icon-light-rain',
  'el-icon-lightning',
  'el-icon-heavy-rain',
  'el-icon-sunrise',
  'el-icon-sunrise-1',
  'el-icon-sunset',
  'el-icon-sunny',
  'el-icon-cloudy',
  'el-icon-partly-cloudy',
  'el-icon-cloudy-and-sunny',
  'el-icon-moon',
  'el-icon-moon-night',
  'el-icon-dish',
  'el-icon-dish-1',
  'el-icon-food',
  'el-icon-chicken',
  'el-icon-fork-spoon',
  'el-icon-knife-fork',
  'el-icon-burger',
  'el-icon-tableware',
  'el-icon-sugar',
  'el-icon-dessert',
  'el-icon-ice-cream',
  'el-icon-hot-water',
  'el-icon-water-cup',
  'el-icon-coffee-cup',
  'el-icon-cold-drink',
  'el-icon-goblet',
  'el-icon-goblet-full',
  'el-icon-goblet-square',
  'el-icon-goblet-square-full',
  'el-icon-refrigerator',
  'el-icon-grape',
  'el-icon-watermelon',
  'el-icon-cherry',
  'el-icon-apple',
  'el-icon-pear',
  'el-icon-orange',
  'el-icon-coffee',
  'el-icon-ice-tea',
  'el-icon-ice-drink',
  'el-icon-milk-tea',
  'el-icon-potato-strips',
  'el-icon-lollipop',
  'el-icon-ice-cream-square',
  'el-icon-ice-cream-round',
]
var iconsDialog = ref(false)
var newMenu = reactive({
  parentId: 0,
  menuName: '',
  path: '',
  component: null,
  perms: null,
  icon: null,
  type: null,
  orderNum: 0,
  createDate: dateFormat(),
  updateDate: dateFormat(),
  isDelete: 0,
  childrenList: null,
})
//当前日期格式化
function dateFormat() {
  var date = new Date()
  var year = date.getFullYear()
  var month =
    date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
  var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
  var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
  var minutes =
    date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
  var seconds =
    date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
  return (
    year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds
  )
}
var menu_name = ref()
var parent_id = ref()
const menuList = ref()
const dialogFormVisible = ref(false)
const addDialogVisible = ref(false)
const checkData = ref('')
var pageSize = ref(5)
var currentPage = ref(1)
var menu = ref([])
const menu2 = ref([])
var rowdata = ref([])
var statu = ref()
var result = ref(false)
const handleSelectionChange = val => {
  // console.log(val.map((item) => item.menu_id));
  menuList.value = val.map(item => item.menu_id)
}
onMounted(async () => {
  menu.value = (await getMenu(menu_name.value, parent_id.value)).data
  menu2.value = menu.value
  // console.log(menu.value)
})
function selectIcon(iconName) {
  newMenu.icon = iconName
  iconsDialog.value = false
}
function check(row) {
  checkData.value =
    '菜单编号：' +
    row.menuId +
    '\n菜单名称：' +
    row.menuName +
    '\n父菜单编号：' +
    row.parentId +
    '\n路径：' +
    row.path +
    '\n组件：' +
    row.component +
    '\n权限标识：' +
    row.perms +
    '\n图标：' +
    row.icon +
    '\n类型：' +
    row.type +
    '\n创建日期：' +
    row.createDate +
    '\n更新日期：' +
    row.updateDate +
    '\n状态：' +
    (row.isDelete == 0 ? ' 启用' : ' 禁用')
}
function addMenuBtn() {
  rowdata.value = []
  addDialogVisible.value = true
}
function editrow(row) {
  rowdata.value = row
  statu.value = rowdata.value.isDelete
  dialogFormVisible.value = true
}
async function searchMenu() {
  // console.log(menu_name.value)
  // console.log(parent_id.value)
  menu.value = (await getMenu(menu_name.value, parent_id.value)).data
  // dialogFormVisible.value = true
}
async function SubmitMenu() {
  // console.log('提交数据')
  addDialogVisible.value = false
  console.log(newMenu)
  result.value = (await addMenu(JSON.stringify(newMenu))).data
  if (result.value == true) {
    ElMessage.success('添加成功')
    location.reload()
  } else {
    ElMessage.error('添加失败')
  }
}
function reset() {
  menu_name.value = null
  parent_id.value = null
}
async function saveMenu() {
  rowdata.value.isDelete = statu.value
  // console.log(JSON.parse(JSON.stringify(rowdata.value)));
  result.value = (await editMenu(JSON.stringify(rowdata.value))).data
  dialogFormVisible.value = false
  if (result.value == true) {
    ElMessage.success('保存成功')
    // location.reload()
  } else {
    ElMessage.error('保存失败')
  }
}
async function deleterow(row) {
  ElMessageBox.confirm('确定删除吗？', 'Warning', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(async () => {
    result.value = (await deleteMenu(row.menuId)).data
    // console.log(result.value);
    if (result.value) {
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
      location.reload()
    } else {
      ElMessage({
        type: 'error',
        message: '删除失败',
        duration: 500,
        onClose: () => {
          location.reload()
        },
      })
    }
  })
}
function deleterows() {
  console.log(menuList.value)
  console.log('批量删除')
  // menuList.value=null
}
</script>
<style>
.search {
  width: 15%;
  margin-bottom: 20px;
  margin-right: 20px;
}
.el-table__body tr:hover > td {
  background-color: #d7eff6 !important;
  /* color: #f19944; */ /* 设置文字颜色，可以选择不设置 */
}
.el-popconfirm__main {
  white-space: pre-line;
  padding: 10px;
}
#iconLi:hover {
  background-color: rgb(154, 219, 243);
}
</style>
